import React from 'react'
import { connect } from 'dva'
import queryString from 'query-string'
import {
  Button,
  Card,
  Modal,
  Radio,
  Tabs
} from 'antd'
import List from './List'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand'
import styles from './List.less'
import { showButton } from 'utils/promissionFilter'

const RadioGroup = Radio.Group
const confirm = Modal.confirm
const TabPane = Tabs.TabPane;

const FinancialPaymentBills = ({location, dispatch, financialPaymentBill, app, loading}) => {
  location.query = queryString.parse(location.search)
  const {items, pagination, currentItem, isExpand, paymentTypeModal, paymentType, selectRows,currentType} = financialPaymentBill
  const {user, resources} = app

  const breadcrumbList = [
    {
      title: '财务管理'
    }, {
      title: '付款单'
    }
  ]

  const listProps = {
    dataSource: items,
    loading: loading.effects['financialPaymentBill/query'],
    pagination,
    pageChangeAction: 'financialPaymentBill/query',
    dispatch,
    location,
    onSelectRows (selectedRowKeys, selectRows) {
      dispatch({
        type: 'financialPaymentBill/updateState',
        payload: {
          selectRows: selectRows
        }
      })
    },
    onShowDetail (record) {
      dispatch({
        type: 'financialPaymentBill/showDetail',
        payload: {
          recordId: record.id
        }
      })
    },
    onAudit (record) {
      dispatch({
        type: 'financialPaymentBill/auditPaymentBill',
        payload: {
          recordId: record.id
        }
      })
    },
    onPay (record) {
      dispatch({
        type: 'financialPaymentBill/showPaymentTypeModal',
        payload: {
          currentItem: record
        }
      })
    },
    onReceipt (record) {
      confirm({
        title: '您确认要为该付款单进行返充?',
        content: '确认后，该操作将会产生一条收款单记录',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          dispatch({
            type: 'financialPaymentBill/receiptBill',
            payload: {
              paymentBillId: record.id
            }
          })
        },
        onCancel () { },
      })
    }
  }

  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'num',
        title: '付款单号'
      }, {
        type: 'select',
        id: 'auditStatus',
        title: '审核状态',
        options: [
          {
            value: '',
            name: '全部'
          }, {
            value: 'NULL',
            name: '待审核'
          }, {
            value: 'AUDIT_SUCCESS',
            name: '审核通过'
          }, {
            value: 'AUDIT_FAIL',
            name: '审核未通过'
          }
        ]
      }, {
        type: 'select',
        id: 'paymentStatus',
        title: '支付状态',
        options: [
          {
            value: 'NONE',
            name: '未下单'
          }, {
            value: 'PAYMENT_STAY',
            name: '待付款'
          }, {
            value: 'PAYMENT_SUCCESS',
            name: '付款成功'
          }, {
            value: 'PAYMENT_FAIL',
            name: '付款失败'
          }
        ]
      }, {
        type: 'input',
        id: 'receipterName',
        title: '收款方'
      }, {
        type: 'input',
        id: 'amount',
        title: '金额'
      }, {
        type: 'dateRule',
        id: 'cashHandleTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '付款时间'
      }
    ],
    onFilterChange (value) {
      dispatch({
        type: 'financialPaymentBill/query',
        payload: {
          ...value
        }
      })
    },
    isExpand,
    noExpand () {
      dispatch({type: 'financialPaymentBill/unExpandFilter', payload: {}})
    },
    expand () {
      dispatch({type: 'financialPaymentBill/expandFilter', payload: {}})
    }
  }

  /**
   * 批量付款
   */
  const batchPayment = () => {
    if (!selectRows || selectRows.length === 0) {
      Modal.info({title: '提示', content: '请先选择需要付款的付款单'})
      return
    }
    // 付款单状态必须全部为待支付
    let statusMismatchRows = _.find(selectRows, (row) => {
      return row.paymentStatus != 'PAYMENT_STAY'
    })
    if (statusMismatchRows && Object.keys(statusMismatchRows).length != 0) {
      Modal.info({title: '提示', content: '请选择状态为「待支付」的付款单'})
      return
    }
    // 付款单的收款人必须属于同一个财务账户
    let accountMismatchRows = _.find(selectRows, (row) => {
      return row.payeeId != selectRows[0].payeeId
    })
    if (accountMismatchRows && Object.keys(accountMismatchRows).length != 0) {
      Modal.info({title: '提示', content: '请选择「同一个用户」的结算申请单进行结算'})
      return
    }
    dispatch({
      type: 'financialPaymentBill/batchPayment',
      payload: {
        selectRows: selectRows
      }
    })
  }
  const batchImport = () => {
    console.log('批量导入')
  }

  const paymentTypeModalOk = (e) => {
    if (paymentType === 'OFFLINE') {
      dispatch({
        type: 'financialPaymentBill/payBill',
        payload: {
          paymentType: paymentType,
          paymentBillId: currentItem.id
        }
      })
    } else {
      Modal.info({title: '提示', content: `线上支付暂时没有做`})
      return
    }
  }

  const paymentTypeModalCancel = (e) => {
    dispatch({type: 'financialPaymentBill/hidePaymentTypeModal', payload: {}})
  }

  const changPaymentType = (e) => {
    dispatch({
      type: 'financialPaymentBill/updateState',
      payload: {
        paymentType: e.target.value
      }
    })
  }
  const tabChange = (key) => {
    dispatch({
      type: 'financialPaymentBill/setCurrentTab',
      payload:key
    })
    dispatch({
      type: 'financialPaymentBill/query'
    })
  }
  return (
    <PageHeaderLayout title="付款单" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <div className={styles.tableList}>
          <OrderFilterUnExpand {...filterProps} />
          <div className={styles.tableListOperator}>
            {showButton('financialPaymentBill.batchImport', resources, user) && <Button
              icon="pay-circle"
              type="primary"
              style={{marginRight: 20}}
              onClick={() => batchPayment()}>
              批量付款
            </Button>}
            {showButton('financialPaymentBill.batchImport', resources, user) && <Button
              icon="file-excel"
              type="primary"
              onClick={() => batchImport()}>
              导入
            </Button>}
          </div>
          <Tabs onChange={tabChange} type="card" activeKey={currentType}>
            <TabPane tab="余额账户" key="SALES">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="第三方账户" key="THIRD">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="优惠券账户" key="COUPON">
              <List {...listProps} />
            </TabPane>
          </Tabs>

          <Modal
            title="请选择支付方式？"
            visible={paymentTypeModal}
            onOk={paymentTypeModalOk}
            onCancel={paymentTypeModalCancel}>
            <RadioGroup onChange={changPaymentType} value={paymentType}>
              <Radio className={styles.radio} value="OFFLINE">线下支付</Radio>
              <Radio className={styles.radio} value="ONLINE">线上支付</Radio>
            </RadioGroup>
          </Modal>
        </div>
      </Card>
    </PageHeaderLayout>
  )
}

export default connect(({financialPaymentBill, app, loading}) => ({
  financialPaymentBill,
  app,
  loading
}))(FinancialPaymentBills)
